<template>
    <el-aside>
        <el-menu
            class="el-menu-vertical-demo"
            router
            @open="handleOpen"
            :default-active="defaultActive"
            :default-openeds="defaultOpeneds"
            @close="handleClose"
        >
            <el-menu-item index="home">
                <el-icon><location /></el-icon>
                <template #title>HomeView</template>
            </el-menu-item>
            <el-menu-item index="about">
                <el-icon><icon-menu /></el-icon>
                <template #title>AboutView</template>
            </el-menu-item>
            <el-menu-item index="lineChart">
                <el-icon>
                    <document />
                </el-icon>
                <template #title>lineChart</template>
            </el-menu-item>
            <el-menu-item index="barChart">
                <el-icon>
                    <setting />
                </el-icon>
                <template #title>barChart</template>
            </el-menu-item>
            <el-menu-item index="pieChart">
                <el-icon>
                    <setting />
                </el-icon>
                <template #title>pieChart</template>
            </el-menu-item>
            <el-menu-item index="baiduMapInit">
                <el-icon>
                    <setting />
                </el-icon>
                <template #title>baiduMapInit</template>
            </el-menu-item>
        </el-menu>
    </el-aside>
</template>
<script setup>
import { ref } from 'vue'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const defaultActive = ref('home')
const defaultOpeneds = ref(['home'])
const router = useRouter()
router.beforeEach((to, from) => {
    console.log(to, 999999)
    defaultActive.value= to.name
})
const handleOpen = (key, keyPath) => {
    console.log('handleOpen',key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log('handleClose',key, keyPath)
    console.log(key, keyPath)
}
</script>
<style lang="less" scoped>
.el-aside {
    height: calc(100vh - 100px);
    .el-menu {
        width: 300px;
        height: 100%;
    }
}
</style>
